<!--
 * @Author: sjt
 * @Date: 2022-10-25 13:18:12
 * @LastEditors: sjt
 * @LastEditTime: 2024-10-09 10:19:00
 * @Description: file content
-->
<template>
  <div class="box">
    <div class="barsChart" ref="barsChartRef"></div>
    <div class="title">
      <span class="name">逾期总件数</span>
      <span class="num">{{ total }}</span>
    </div>
  </div>

</template>

<script setup>
import { defineExpose, ref } from 'vue'
import * as echarts from 'echarts'
let charts = null
const barsChartRef = ref(null)
let total = ref(0)
const initChart = (datas, t) => {
  total.value = t
  function getMaxIndex (arr) {
    var max = arr[0];
    //声明了个变量 保存下标值
    var index = 0;
    for (var i = 0; i < arr.length; i++) {
      if (max < arr[i]) {
        max = arr[i];
        index = i;
      }
    }
    return index;
  }
  let xAxis = datas.map((item) => item.name)
  let maxIndex = getMaxIndex(datas.map(item => item.value))
  const basicColors = [
    ['rgba(2, 139, 255,0.1)', 'rgba(2, 139, 255,0.82)'],
    ['rgba(2, 139, 255,0.1)', 'rgba(2, 139, 255,0.82)'],
    ['rgba(2, 139, 255,0.1)', 'rgba(2, 139, 255,0.82)'],
    ['rgba(2, 139, 255,0.1)', 'rgba(2, 139, 255,0.82)'],
    ['rgba(2, 139, 255,0.1)', 'rgba(2, 139, 255,0.82)'],
    ['rgba(2, 139, 255,0.1)', 'rgba(2, 139, 255,0.82)']
  ]
  // 生成渐变色
  function genLinearGradient (colors) {
    const color = {
      type: 'linear',
      x: 0,
      y: 0,
      x2: 0,
      y2: 1,
      colorStops: [
        {
          offset: 0,
          color: colors[0] // 0%处的颜色
        },
        {
          offset: 1,
          color: colors[1] // 100%处的颜色
        }
      ],
      global: false
    }
    return color
  }

  let option = {
    grid: {
      left: '10%',
      top: '30%',
      bottom: '12%',
      right: '5%'
    },
    tooltip: {
      show: false,
      trigger: 'axis',
      axisPointer: {
        lineStyle: {
          color: 'rgba(255,255,255,0.8)'
        }
      }
    },
    xAxis: {
      data: xAxis,
      axisTick: {
        show: false
      },
      axisLine: {
        lineStyle: {
          color: '#43A8FD',
          width: 2
        }
      },
      axisLabel: {
        color: '#C7DFFC',
        fontSize: 12
      }
    },
    yAxis: [
      {
        name: "单位（件）",
        axisTick: {
          show: false
        },
        axisLine: {
          lineStyle: {
            color: '#fff',
            width: 1 // 这里是为了突出显示加上的
          }
        },
        axisLabel: {
          fontSize: 12,
          color: '#fff'
        },
        splitLine: {
          show: true,
          lineStyle: {
            color: 'rgba(67, 168, 253, 0.1)',
            type: 'solid'
          }
        }
      }
    ],
    series: [
      {
        name: '单位（件）',
        type: 'pictorialBar',
        barCategoryGap: '0%',
        symbol: 'path://M0,10 L10,10 C5.5,10 5.5,5 5,0 C4.5,5 4.5,10 0,10 z',
        label: {
          show: true,
          position: 'top',
          distance: 0,
          color: '#FFF6B7',
          fontWeight: 'bolder',
          fontSize: 14
        },
        itemStyle: {
          color: function (params) {
            return params.dataIndex === maxIndex ? genLinearGradient(['rgba(255, 170, 49, 0)', 'rgba(255, 170, 49, 0.5)']) : genLinearGradient(['rgba(2, 139, 255,0.1)', 'rgba(2, 139, 255,0.82)'])
          }
        },
        data: datas,
        z: 10
      }
    ]
  }

  if (!charts) {
    charts = echarts.init(barsChartRef.value)
    charts.setOption(option)
  } else {
    charts.dispose()
    charts = echarts.init(barsChartRef.value)
    charts.setOption(option)
  }
  window.addEventListener('resize', () => {
    if (charts) {
      charts.resize()
    }
  })
}

defineExpose({
  initChart
})
</script>

<style lang="scss" scoped>
.box {
  width: 100%;
  height: 100%;
  position: relative;
}

.barsChart {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.title {
  position: absolute;
  right: 0;
  top: 0;
  width: 40%;
  height: 20%;
  background: url('@/assets/images/page2/list3-title-bg.png') no-repeat;
  background-size: 100% 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 22px 0 8px;

  .name {
    font-size: .7vh;
    color: #C7DFFC;
  }

  .num {
    font-family: AgencyFB-Bold;
    font-size: 1.1vh;
    text-shadow: 0 0 14px rgba(2, 139, 255, 0.56),
      0 0 14px rgba(2, 139, 255, 0.56);
  }
}
</style>
